    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    input[type=text],
    input[type=password] {
        width: 200px;
        height: 30px;
        border: none;
        background: transparent;
        outline: 0;
        border-bottom: 3px solid black;
        font-size: 20px;
    }

    button {
        width: 100px;
        height: 30px;
        border: none;
        background: transparent;
        outline: 0;
        font-size: 20px;
        border-radius: 5px;
        letter-spacing: 0.5em;
        cursor: pointer;
    }

    body {
        /* 背景渐变色 - 原理2 */
        background: linear-gradient(90deg, #db39d9, #fe31b8, #ff3f99, #ff5a7e, #ff7669, #ff915c, #ffa959, #f5bf61, #e6d373, #d8e48d, #cdf2ab, #c7ffca);
        /* 背景尺寸 - 原理3 */
        background-size: 700% 700%;
        /* 循环动画 - 原理4 */
        animation: gradientBG 30s ease infinite;
    }

    /* 动画，控制背景 background-position */
    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }


    .box {
        margin-top: 30px;
        width: 300px;
        height: 100px;
        line-height: 100px;
        position: relative;
        left: 15px;
        color: rgb(128, 128, 128);
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        border-radius: 5px;
        letter-spacing: 0.5em;
        backdrop-filter: blur(18.5px);
        -webkit-backdrop-filter: blur(18.5px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        -webkit-box-shadow: 46px 23px 0px 0px rgba(0, 0, 0, 0.13);
        -moz-box-shadow: 46px 23px 0px 0px rgba(0, 0, 0, 0.13);
        box-shadow: 46px 23px 0px 0px rgba(0, 0, 0, 0.13);
    }

    .rightBox {
        width: 400px;
        height: 100vh;
        padding: 15px;
        box-sizing: border-box;
        position: fixed;
        right: -420px;
        top: 0px;
        border-radius: 40px;
        backdrop-filter: blur(20px);
        color: rgb(128, 128, 128);
        box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
        overflow-y: auto;
    }

    .login-box {
        width: 100vw;
        height: 100vh;
        z-index: 9999999;
        position: fixed;
        top: 0px;
        left: 0px;
        display: inline-block;
        border-radius: 5px;
        letter-spacing: 0.5em;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(18.5px);
    }

    .window {
        width: 200px;
        height: 270px;
        position: absolute;
        top: 40%;
        left: 43%;
        overflow: hidden;
    }

    .cont-box {
        width: 400px;
        height: 100%;
        position: absolute;
    }

    .cont-box>div {
        width: 200px;
        height: 100%;
        float: left;
        position: relative;
    }

    .registe-but {
        letter-spacing: 0em;
        position: absolute;
        bottom: 70px;
        right: 0px;
        cursor: pointer;
    }

    .log-but {
        letter-spacing: 0em;
        position: absolute;
        bottom: 0px;
        left: 0px;
        cursor: pointer;
    }
